{% extends "base.html" %}

{% block label %}
    <div class="col-lg-12">
        <h1 class="page-header">
            {{ d.d_name }}-职位管理
            <a class="btn btn-default pull-right" data-toggle="modal" data-target="#add_modal">添加</a>
        </h1>
    </div>
{% endblock %}

{% block content %}
    <div class="col-lg-12">
        <div class="row">
            <table class="table">
                <thead>
                <tr>
                    <th>职位名称</th>
                    <th>职位等级</th>
                    <th>职位操作</th>
                </tr>
                </thead>
                <tbody>

                {% for p in p_list %}
                <tr>
                    <td class="col-lg-4">{{ p.p_name }}</td>
                    <td class="col-lg-4">{{ p.p_level }}</td>
                    <td class="col-lg-4">
                        <a class="btn btn-default" data-toggle="modal" data-target="#edit_modal" onclick="get_position({{ p.id }})">编辑</a>
                        <a class="btn btn-default" href="/del_position/{{ p.id }}/">删除</a>
                    </td>
                </tr>
                {% endfor %}


                </tbody>
            </table>
        </div>
        <div class="modal" id="add_modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                        </button>
                        <h4>新增职位</h4>
                    </div>
                    <div class="modal-body">
                        <form method="post">
                            <div class="form-group">
                                <label class="control-label">职位名称：</label>
                                <input class="form-control" type="text" name="name">
                            </div>
                            <div class="form-group">
                                <label class="control-label">职位等级：</label>
                                <input class="form-control" type="number" name="level">
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary btn-block">提交</button>
                            </div>
                        </form>
                    </div>
                    <!--
                    <div class="modal-footer"></div>
                    -->
                </div>
            </div>
        </div>
        <div class="modal" id="edit_modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                        </button>
                        <h4>编辑职位</h4>
                    </div>
                    <div class="modal-body">
                        <form method="post">
                            <input id="p_hidden" type="hidden" name = "p_id">
                            <div class="form-group">
                                <label class="control-label">职位名称：</label>
                                <input id="p_name" class="form-control" type="text" name="name">
                            </div>
                            <div class="form-group">
                                <label class="control-label">职位等级：</label>
                                <input id="p_level" class="form-control" type="number" name="level">
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary btn-block">提交</button>
                            </div>
                        </form>
                    </div>
                    <!--
                    <div class="modal-footer"></div>
                    -->
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        function get_position(id){
            var url = "/get_position/"+id+"/"; //通过按钮传递的id拼接路由
            $.ajax( //创建ajax对象
                { //设置ajax参数
                    url: url, //指定ajax请求的地址
                    type: "get", //指定请求的方式是get
                    data: "", //没有携带额外的数据
                    success: function(data){ //定义执行成功的回调函数，data用来接收服务器返回的参数
                        var id = data["id"];
                        var name = data["p_name"];
                        var level = data["p_level"];
                        $("#p_name").val(name); //将得到的数据绑定到模态框的input上
                        $("#p_level").val(level);
                        $("#p_hidden").val(id);

                    },
                    error: function(error){ //定义执行失败的回调函数，errir用来接收服务器返回的参数
                        console.log(error)
                    }
                }
            )
        }
    </script>

{% endblock %}